<template>
	<view>
		<u-navbar back-icon-color="#fff" title-color="#fff" :border-bottom="false">
			<view slot="content" class="detailSelect">
				<view class="uni-list-cell-db" @click="selectClick">
					<view class="uni-input">{{ selector.organizeName }}</view>
					<my-icon name="xiajiantou_biaotilan"></my-icon>
					<u-picker mode="selector" v-model="show" @confirm="confirm" :default-selector="[0]" range-key="organizeName" :range="organizeData"></u-picker>
				</view>
			</view>
		</u-navbar>
		<view class="detailBg"></view>
		<my-empty v-if="emptyFalse"  emptyTit="暂无数据"></my-empty>
		<view class="detailCon" v-else>
			<!-- 详情头部 -->
			<view class="detailTop">
				<view class="detailTopView">
					<view>{{ rankInfo.average?rankInfo.average:0}}</view>
					<text>平均分</text>
				</view>
				<view class="detailTopView">
					<view>{{ rankInfo.passCount?rankInfo.passCount:0 }}</view>
					<text>及格人数</text>
				</view>
				<view class="detailTopView">
					<view>{{ rankInfo.missedExamCount?rankInfo.missedExamCount:0 }}</view>
					<text>缺考人数</text>
				</view>
			</view>
			<!-- 记录 -->
			<view class="detailRecord">
				<view class="detailRecordLeft">
					<view class="flexNum">
						<text class="topNode">最高分：</text>
						<text class="topNum">{{ rankInfo.highestScore }}</text>
					</view>
					<view class="flexNum">
						<text class="topNode">最低分：</text>
						<text class="topNum">{{ rankInfo.lowestScore }}</text>
					</view>
				</view>
				<view class="detailRecordRight">
					<view class="flexNum">
						<text class="topNode">学生姓名：</text>
						<text class="topTit">{{ rankInfo.highestUserName }}</text>
					</view>
					<view class="flexNum">
						<text class="topNode">学生姓名：</text>
						<text class="topTit">{{ rankInfo.lowestUserName }}</text>
					</view>
				</view>
			</view>
			<!-- 排行榜 -->
			<view class="rankList_con">
				<my-empty v-if="emptyFalse"  emptyTit="暂无数据"></my-empty>
				<view class="rank_list"  v-else v-for="(item, index) in rankList">
					<view class="listLeft">
						<image v-if="index < 3" :src="getImgUrl(index + 1)"></image>
						<text v-else>{{ index + 1 }}</text>
					</view>
					<view class="listAll">
						<view class="listMid">
							<image :src="item.avatar ? item.avatar : '../../static/avatar.png'"></image>
							<view class="listTxt">
								<view>{{ item.userName }}</view>
								<text>交卷时间：{{ item.endTime }}</text>
							</view>
						</view>
						<view class="listRight gre" :class="[item.score < 60 ? 'org' : 'gre']">{{ item.score }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			examId: '', //考试ID
			organizeData: [], //班级数据
			show: false, //下拉显示
			selector: {}, //选中的数据
			rankInfo: {}, //数据信息
			rankList: [], //排行榜
			detailType: 1, //1考试分析详情，2试卷分析详情,
			dataUrl: ['/app/teacher/examanalysis/getStudentExamAnalysisInfo/', '/app/teacher/paperanalysis/getPaperDetails/'],
			emptyFalse: false
		};
	},
	onLoad(option) {
		if (option.examid) {
			this.detailType = 1; //考试分析进入
			this.examId = option.examid;
		} else {
			this.detailType = 2; //试卷分析进入
			this.examId = option.paperid;
		}
		this.getOragnize();
		// this.init();
	},
	methods: {
		confirm: function(e) {
			this.selector = this.organizeData[e];
			this.rankInfo = {};
			this.init()
		},
		selectClick(){
			// 下拉选项
			this.show=true;
		},
		init() {
			this.rankInfo = {};
			return this.getRank();
		},
		getImgUrl(index) {
			return require('../../static/rank/top' + index + '.png');
		},
		// 获取班级
		getOragnize() {
			const pageData=this.detailType==1?{examid:this.examId}:{};
			return new Promise((resolve, reject) => {
				this.request
					.get('/app/teacher/examanalysis/getClassCode',pageData)
					.then(res => {
						this.organizeData = res;
						this.selector = this.organizeData[0]; //默认选中第一个
						this.getRank();
						resolve();
					})
					.catch(reject);
			});
		},
		// 获取列表
		getRank() {
			const value = this.dataUrl[this.detailType - 1] + `${this.examId}/${this.selector.organizeCode}`;
			return new Promise((resolve, reject) => {
				this.request.get(value).then(res => {
				this.rankInfo = res.appExamDetails;
				this.rankList = res.appStudentExamInfos;
				this.emptyFalse = this.rankList.length > 0 ? false : true;
				resolve()
			})
			.catch(reject);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.detailBg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 611upx;
	background: linear-gradient(-90deg, #40405c 0%, #69698b 100%) !important;
}
.detailCon {
	position: relative;
	z-index: 5;
}
.detailRecord {
	background: #5c94f9;
	width: 650upx;
	padding: 35upx 91upx 25upx;
	height: 160upx;
	border-radius: 30upx 30upx 0 0;
	margin: 0 auto;
	// margin-top: 52upx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.flexNum {
		display: flex;
		.topNode {
			color: #d6e2ff;
			font-size: 28upx;
		}
		.topTit {
			color: #fff;
			font-size: 30upx;
			font-weight: 500;
			max-width: 150upx;
			display: block;
			overflow: hidden;
			white-space: nowrap;
			text-overflow :ellipsis;
		}
		.topNum{
			max-width: 120upx;
			color: #fff;
			font-size: 30upx;
			font-weight: 500;
			display: block;
			overflow: hidden;
			white-space: nowrap;
			text-overflow :ellipsis;
		}
	}
}
.detailTop {
	display: flex;
	justify-content: center;
	margin-top: 56upx;
	margin-bottom: 52upx;
	.detailTopView {
		width: 30%;
		text-align: center;
		view {
			color: #ffd200;
			font-weight: 600;
			font-size: 48upx;
			line-height: 40upx;
			margin-bottom: 35upx;
		}
		text {
			font-size: 28upx;
			color: #dadeeb;
		}
	}
}
.rank_list {
	display: flex;
	justify-content: space-between;
	padding: 32upx 40upx 0upx 32upx;
	height: 150upx;
	align-items: center;
}
.listMid {
	display: flex;
	justify-content: start;
	width: 500upx;
	line-height: 43upx;
	padding-bottom: 30upx;
	image {
		width: 86upx;
		height: 86upx;
		border-radius: 100upx;
		margin-right: 30upx;
	}
}
.listLeft {
	width: 56upx;
	text-align: center;
	image {
		width: 60upx;
		height: 60upx;
	}
	text {
		color: #a6a6a6;
		font-size: 36upx;
		display: block;
		font-weight: 500;
	}
}
.listRight {
	font-size: 38upx;
	font-weight: 600;
	width: 100upx;
	text-align: right;
	padding-bottom: 30upx;
}
.listTxt {
	view {
		color: #4c5059;
		font-size: 30upx;
	}
	text {
		color: #a6a6a6;
		font-size: 26upx;
	}
}
.rank_list:last-child {
	margin-bottom: 50upx;
	.listAll {
		border-bottom: none;
	}
}
.listAll {
	border-bottom: 1px solid #ebebeb;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.gre {
	color: #5fba4a;
}
.org {
	color: #f45c4b;
}
.rankList_con {
	position: relative;
	background: #fff;
	width: 100%;
	border-radius: 50upx 50upx 0 0;
	min-height: 300upx;
	padding-top: 20upx;
	.empty {
		margin-top: 200upx;
		z-index:1
	}
}
.empty {
		z-index:1
}
</style>
